<template>
    <!-- 向公共组件传值 -->
    <CommonCardVue title="今日交易用户数" :value="(orderUser as number)">
        <v-chart :option="getOption()" autoresize />
        <template v-slot:bottom>
            <span>退货率</span>
            <span class="emphasis">{{ returnRate + "%" }}</span>
        </template>
    </CommonCardVue>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "TodayUsers",
});
</script>

<script setup lang="ts">
import CommonCardVue from "./CommonCard.vue";
import useDataStore from "@/stores/mock";
import { computed } from "vue";

const dataStore = useDataStore();
const orderUser = computed(() => dataStore.mockData.orderUser);
const returnRate = computed(() => dataStore.mockData.returnRate);
const orderUserTrend = computed(
    () => dataStore.mockData.orderUserTrend || []
);
const orderUserTrendAxis = computed(
    () => dataStore.mockData.orderUserTrendAxis || []
);

const getOption = () => {
    return {
        //x轴的配置
        xAxis: {
            data: orderUserTrendAxis.value, // x轴数据
        },
        //y轴配置
        yAxis: {
            show: false,
        },
        //图标配置
        series: [
            {
                name: "实时交易量", // 图标名称
                //type:bar代表柱状态
                type: "bar",
                // 列表数据(和x轴数据对应)
                data: orderUserTrend.value,
                //柱子的占用他区域的宽度
                barWidth: "60%", // 宽度占用比例
            },
        ],
        // 图表在坐标中显示的位置
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },

        // 柱的颜色
        color: ["deepskyblue"],
        // 显示提示
        tooltip: {
            //柱状图的tip触发条件也是axis
            trigger: "axis",

            //如果图过小,提示可能会展示在echart区域外,解决方案有如下两种
            //1.设置confine为true:可能会盖住图片
            // confine: true,
            //2.设置position函数,配置tip的位置,函数返回定位
            position: function (
                //鼠标位置的对象,下标为0就是鼠标x轴的位置
                point: any,
                params: any,
                dom: any,
                rect: any,
                //提示框的大小配置对象,内部有一个contentSize代表提示框的宽度
                size: any
            ) {
                // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                // 提示框位置
                let x = 0; // x坐标位置

                // 当前鼠标位置
                let pointX = point[0];
                let pointY = point[1];

                // 提示框大小
                let boxWidth = size.contentSize[0];

                // boxWidth > pointX 说明鼠标左边放不下提示框
                if (boxWidth > pointX) {
                    x = 5;
                } else {
                    // 左边放的下
                    x = pointX - boxWidth;
                }

                return [x, -90 + pointY];
            },
        },
    };
};

</script>